<template>
  <div class="mod-home">
    <mavon-editor
      v-model="value"
      :toolbarsFlag="false"
      :subfield="false"
      defaultOpen ="preview"
      style="z-index: 0"
    />
  </div>
</template>

<script>
  export default {
    data () {
      return {
        value: '## Raiseinfo Frontend Framework \n' +
          '\n' +
          '### 安装及运行\n' +
          '```\n' +
          '1. cnpm install\n' +
          '2. npm run dev\n' +
          '```\n' +
          '### 开启Mock模拟数据\n' +
          '```\n' +
          '1. 全局开启Mock：\n' +
          '  通过设置/src/mock/index.js)文件中fnCreate(common, [false])[]中括号中为true／false开启关闭当前模块mock本地模拟数据功能。\n' +
          '2. 模块级局部开启：\n' +
          '  通过设置/src/mock/modules/文件下模块isOpen: [false][]中括号中为true／false开启关闭当前api接口mock本地模拟数据功能。（默认开启）\n' +
          '```\n' +
          '### 定制主题\n' +
          '```\n' +
          '1. 修改Element-ui组件主题：\n' +
          '  修改/src/element-ui-theme/index.js文件中import \'./element-[#17b3a3]/index.css\'[]中括号中的值，值可以在同文件中list属性中取即可。\n' +
          '2. 修改站点主题：\n' +
          '  修改/src/assets/scss/_variables.scss文件中$--color-primary: [#17b3a3];[]中括号中的值，值与第一步值同步即可。\n' +
          '```\n' +
          '### 动态路由\n' +
          '```\n' +
          '菜单路由项：值为/sys/user自动映射对应文件目录为src/views/modules/[sys/user.vue]文件\n' +
          '```\n' +
          '### 样式调整记录\n' +
          '```\n' +
          '1. 自定义样式：src\\assets\\scss\\_custom.css\n' +
          '2. 应用样式：src\\assets\\scss\\index.scss 添加 @import "custom";\n' +
          '3. Element-ui组件默认为mini：src\\element-ui\\index.js \n' +
          '  Vue.prototype.$ELEMENT = { size: \'mini\' }\n' +
          '```\n' +
          '### 创建功能模块\n' +
          '#### 添加菜单目录和菜单项\n' +
          '```\n' +
          '实际项目中可以在对接系统管理模块后，通过菜单添加，然后根据命名约定创建模块目录。\n' +
          'Mock模拟数据：\n' +
          '1. 创建文件：src\\mock\\modules\\example-grid.js\n' +
          '2. 编辑文件：添加模拟数据，并提供接口\n' +
          '3. 开启Mock拦截：src\\mock\\index.js 添加：\n' +
          '  import * as exampleGrid from \'./modules/example-grid\'\n' +
          '  fnCreate(exampleGrid, true)\n' +
          '4. 添加菜单项：src\\mock\\modules\\sys-menu.js\n' +
          '  添加菜单，添加权限\n' +
          '```\n' +
          '#### 添加功能模块页面\n' +
          '```\n' +
          '1. 在目录src\\views\\modules中创建与菜单URL对应的目录结构\n' +
          '  比如：菜单路径为：example/grid，创建的目录结构统一即可\n' +
          '2. 确保src\\views\\modules\\example\\grid.vue此文件存在，并编写测试代码。\n' +
          '3. 通过点击系统中的[参考页面][数据列表]查看是否显示正常\n' +
          '4. 其他编程细节请看具体模块文件\n' +
          '```\n' +
          '### 利用接口开发\n' +
          '```\n' +
          '修改/static/config/index.js目录文件中 window.SITE_CONFIG[\'baseUrl\'] = \'本地api接口请求地址\';\n' +
          '```\n' +
          '### 跨域设置\n' +
          '```\n' +
          '1. 修改/config/dev.env.js目录文件中OPEN_PROXY: true开启代理\n' +
          '2. 修改/config/index.js目录文件中proxyTable对象target: \'代理api接口请求地址\'\n' +
          '3. 重启本地服务\n' +
          '4. 本测试API：https://www.easy-mock.com/mock/5c1dc926eba47d7ec5d137d3/example/grid/list\n' +
          '```\n' +
          '### 业务实现的步骤和原理\n' +
          '1. 建立业务菜单后后，根据命名规则，在src\\views\\modules\\下面创建相应的模块目录和功能文件。（可以参考添加功能模块页面）\n' +
          '2. 接口调用的实现在：src\\service\\core.js\n' +
          '3. 接口调用的URL定义在：src\\service\\api.js\n' +
          '4. 表单验证方法在：src\\utils\\validator.js\n' +
          '5. 表单验证规则定义：src\\utils\\validate.js\n' +
          '6. 与框架无关的工具函数：src\\utils\\util.js\n' +
          '\n' +
          '### 整合tinymce富文本编辑器\n' +
          '按照依赖包必须在cmd命令行模式下，不要用webstorm或者vscode的终端运行，否则编译不过\n' +
          '```\n' +
          '1. cnpm install tinymce -S\n' +
          '2. 安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下\n' +
          '3. tinymce 默认是英文界面，目前项目中已经准备好了中文包，拷贝使用即可。\n' +
          '4. 创建vue组件，view/common目录中，在这里进行编辑器的初始化和设置\n' +
          '5. 创建项目文件，如：view/modules/example/editor.vue\n' +
          '6. 具体配置请参考文章：https://www.cnblogs.com/wisewrong/p/8985471.html\n' +
          '```\n' +
          '### 整合markdown编辑器\n' +
          '```\n' +
          '1. cnpm install mavon-editor --save\n' +
          '2. 引入组件：参考main.js\n' +
          '3. 项目参考：view/common/home.vue,这里只是作为只读的展示界面，通过调整参数可以变为可编辑。\n' +
          '4. 参考文章：https://www.jianshu.com/p/04376d0c9ff1\n' +
          '5. 参考仓库：https://github.com/hinesboy/mavonEditor\n' +
          '```\n' +
          '### 页面数据打印\n' +
          '```\n' +
          '1. cnpm install vue-print-nb --save\n' +
          '2. import Print from \'vue-print-nb\'\n' +
          '3. 打印范例：views/modules/example/material.vue为打印测试页面\n' +
          '4. views/common/print 使用组件进行版面定制的打印方式\n' +
          '5. views/modules/example/material-print.vue使用新页面定义打印版面的打印方式\n' +
          '```\n' +
          '### 管理静态路由及页面（删除echarts和ueditor）\n' +
          '```\n' +
          '1. 打开文件：src\\router\\index.js\n' +
          '2. 参考home和theme写法，添加路由。这里注释掉echarts和ueditor路由\n' +
          '3. 打开文件：/index.html 注释掉echarts和ueditor相关的行\n' +
          '4. 删除侧栏菜单：在src/views/main-sidebar.vue中注释掉关于echarts和ueditor的相关el-menu-item行。\n' +
          '5. 重新编译如果没有错误则说明删除成功。\n' +
          '6. 添加静态路由及菜单页面，可参考上述步骤自己添加。\n' +
          '7. 总结：静态路由及菜单相关文件：src/router/index.js src/views/main-sidebar.vue\n' +
          '8. 如果是希望把echarts和ueditor打包到项目，需要修改build/webpack.base.conf.js\n' +
          '```\n' +
          '### 调整页面样式\n' +
          '```\n' +
          '1. src/assets/scss/目录用来控制页面的布局和样式。\n' +
          '2. index.scss载入入口\n' +
          '3. _custom.scss用于自定义全局样式\n' +
          '4. _variables.scss用于定义颜色变量\n' +
          '5. _base.scss用于定义侧栏、顶部导航、页面内容的样式\n' +
          '```\n',
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikeThrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imageLink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullScreen: true, // 全屏编辑
          readModel: true, // 沉浸式阅读
          htmlCode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignLeft: true, // 左对齐
          alignCenter: true, // 居中
          alignRight: true, // 右对齐
          /* 2.2.1 */
          subField: true, // 单双栏模式
          preview: true // 预览
        }
      }
    }
  }
</script>

<style>
  .mod-home {
    line-height: 1.5;
  }
</style>

